前言

鐵人倒數十天！利用最後時間來分享瀏覽器，這裡才是真正的戰場。
在 ECMAScript 上並沒有提供網頁的操作方法，事實上這些操作都是由各家瀏覽器提供的，那怎麼達到互動呢？靠的是用 JavaScript 呼叫 BOM、DOM 提供的 API 來控制，因此可以說在瀏覽器上的 JavaScript 的三大核心成員分別為：

• JavaScript 核心 （ECMAScript標準）
• BOM（Browser Object Model）瀏覽器物件模型
• DOM（Document Object Model）文件物件模型

其中的 DOM 與 BOM 是由瀏覽器執行環境所提供，因此在 node 環境下不會有這兩個部分。

今天來講 BOM 和 DOM 的定義，明天開始搭配實作！

圖片來源

BOM 瀏覽器物件模型

BOM 是瀏覽器所有功能的核心，與網頁的內容無關，因為在 DOM level 1 標準前就已經存在，因此也有人稱為 「Level 0 DOM 」。

• BOM 的核心是 window，也是全域物件，代表著瀏覽器的視窗

window 在瀏覽器中的主要角色是：

1. 全域物件 Global object
2. JavScript 用來和瀏覽器溝通的窗口

所以所有在全域下宣告的變數、函式、物件等，都會變成全域 window 的屬性，如 var a = 1，也可以使用 window.a 印出 a 的值。

[[求知小學堂]]
看到這部分的時候，嘗試用 let b = 2 宣告另一個變數，結果無法透過 window.b印出，只有以 var 宣告的變數才能用 window.property 印出，這是為什麼呢？？？

在 stack overflow 找到的解答是：
在全域環境記錄 Global environment record下實際上又分成兩種不同的環境記錄：object environment record 與 declarative environment record，如下圖所示

簡單來說，在全域下const, let, and class 宣告的內容綁定在 Declarative environment record 內，而var 和 function declarations 綁定在 Object environment record，而全域物件 window 參照的是 Object environment record，因此使用 var 或是 function delcaration 的變數可以用 window. 的方式印出。
詳細內容可以參考這篇：Deep JavaScript

BOM 的核心 window

圖片來源

來介紹 window 內主要內容：

• document：代表整個 HTML 文件，是 Document 的實例，下一段著重介紹。

• navigator：可以取得瀏覽器的資料，通常是為了進行偵測瀏覽器類型才會使用這個物件。

• frames：收集了視窗中有的 iframe 對應物件。

• history：包括瀏覽器的歷史，基於安全與隱私無法直接透過 JavaScript 取得瀏覽歷史，但可以操作回到上一頁、下一頁的動作。
  window.history.back()： 回到上一頁
  window.history.forward()： 回到下一頁
  window.history.go(2)： 回到下兩頁

• location：代表 HTML 頁面的 URL，有內建方法可以重載或取代頁面。
  window.location.reload()：重新整理
  window.location.replace('https://www.youtube.com/')： youtube 頁面取代現在的頁面
  （前往 youtube 的意思）

• screen：視窗目前所處的螢幕資訊，像是寬、高、顏色深度等。

window 物件下內建還內建了其他方法，介紹幾個有趣的：

• window.alert('JavaScript is not that easy!')： 跳出警告視窗
• window.confirm('Do you love JS')： 跳出確認視窗，有取消和確定兩個按鈕
• window.prompt('How much do you love JavaScript')： 跳出輸入視窗，可以輸入字元
• window.close()： 關閉視窗
• window.open()： 開新視窗

DOM 文件物件模型

DOM 全名是 Document Object Model 文件物件模型，是一個將 HTML 文件以樹狀的結構來表示的模型，組合起來的稱為「DOM Tree」。

DOM-Tree 的示意結構如下，最根部的地方就是 document，往下延伸出一個個 HTML 節點，一個節點就是一個標籤，DOM API 就是定義了讓 JavaScript 可以存取、改變 HTML 結構、樣式和內容的方法，甚至是對於節點的事件綁定，讓我們可以做到與使用者在網頁上的互動。

圖片來源

BOM 與 DOM 差異

BOM 是 JavaScript 與「瀏覽器」溝通的窗口，不涉及網頁內容，完全依賴於瀏覽器廠商實作，本身無標準規範
DOM 是 JavaScript 用來控制「網頁」的節點與內容的標準，有著 W3C 所制定的標準規範。

Reference

008天重新認識 JavaScript
JavaScript 技術手冊
Deep JavaScript

結語

理解 BOM 與 DOM 的關係後，明天介紹如何擷取到 DOM 上的節點元素！